<template>
  <div class="login">
    <Navigation1></Navigation1>
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="username" label="" placeholder="账号"
        :rules="[{ required: false, message: '请填写账号' }]" />
      <div class="passw">
        <van-field v-model="password" :type="passwordType" name="password" label="" placeholder="密码"
          :rules="[{ required: false, message: '请填写密码' }]" :mask="maskAction">
        </van-field>
        <van-field class="switch_button" name="switch" label="">
          <template #input>

            <van-switch v-model="switchChecked" size="25" @input="onInput" />
          </template>
        </van-field>

      </div>
      <Id_code></Id_code>
      <p>温馨提示：未注册过的账号，登录时将自动注册</p>
      <p>注册过的用户可凭账号密码登录</p>

      <div style="margin: 16px;">
        <van-button round block type="info" >
          登录
        </van-button>
      </div>
    </van-form>

    <AlertText></AlertText>

    <div class="reset">
      <router-link to="/reset">重置密码?</router-link>
    </div>
    <router-view></router-view>
  </div>

</template>

<script>
  import AlertText from "@/components/AlertText.vue";
  // import Cookie from "js-cookie";
  import Navigation1 from "@/components/Navigation1.vue";
  import Id_code from "@/components/Id_code.vue";
  export default {
    data() {
      return {
        username: "",
        password: "",
        switchChecked: "false",
        maskAction: true,
        passwordType: "password",
      }
    },
    components: {
      Id_code,
      Navigation1,
      AlertText,
    },
    methods: {
      onInput() {
        if (this.switchChecked) {
          this.passwordType = "text";
        } else {
          this.passwordType = "password";
        }
      },
  }
  }
</script>

<style scoped lang="less">
  p {
    font-size: 0.3rem;
    color: red;
    padding: 0.2rem 0rem;
    line-height: 0.5rem;
    margin-left: 0.4rem;
    text-align: left;
  }

  .van-button {
    font-size: 0.4rem;
    border-radius: 0.15rem;
    background-color: #4cd964;
    border: 0rem;
    padding: 0.6rem 0rem;
  }

  .van-switch--on {
    background-color: #4cd964;
  }

  .van-field {
    padding: 0.4rem 0.5rem;
    background-color: white;
    border-bottom: 1px solid #f1f1f1;
    font-size: 0.45rem;
  }

  .passw {
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: white;
  }

  .switch_button {
    height: 1.3rem;
    width: 2.1rem;
    right: 0.5rem;
  }

  .reset {
    position: relative;
    left: 38%;
    font-size: 0.35rem;
    color: #3b95e9;
  }

</style>